<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.nav{
			border:2px solid blue;
			padding-left: 0;
			width:500px;
			margin:200px auto;
			background: pink;
		}
		.a1{
			list-style: none;
			/*border:1px solid red;*/
			display: block;
			color: white;
			width:160px;
			height: 55px;
			line-height: 40px;
			text-align: center;
			background: black;
			padding-top: 10px;
		}
		/*二级菜单定位 position*/
		#b1{
			position: relative;
		}
		.subnav{
			position: absolute;
			border:1px solid green;
			display: none;
		}
		#b1:hover .subnav{
			display: block;
		}
		.a2{
			width: 160px;
			height: 5px;
			display: inline-block;
		}
	</style>
</head>
<body>
	<ul class="nav">
		<li class="a1" >目录1
			<ul class="subnav"></ul>
		</li>
		<li class="a2"></li>
		<li class="a1">目录2</li>
		<li class="a1">目录3</li>
		<li class="a1">目录4</li>
	    <li class="a1">目录5</li>
	    <li class="a1">目录6</li>
	</ul>
</body>
</html>